CSS + JS 時鐘

先附上最終成品圖
以及個人codepen

利用JS去取得現在的時間，再去操控ＣＳＳ的變化，一開始覺得不太熟悉的是CSS的屬性該怎麼使用ＸＤ

技巧點

關於日期的用法有很多，主要依據此練習的內容，所會用到的做紀錄．

1. new Date()

const now = new Date(); // Thu Sep 05 2024 00:00:00 GMT+0800 (台北標準時間)

當未傳入任何參數進入時，可以得到一個依據當地現在時間的物件

const now = Date().now; // 1728057600000
const now = new Date(1724075442924); // Thu Sep 05 2024 00:00:00 GMT+0800 (台北標準時間)

另外一個也可以得到當地時間的用法
根據ＭＤＮ文件的定義：回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數．
因為得到的是毫秒數，所以可以將毫秒數當作參數放入到new Date()

同樣的你也可以用new Date()去取得現在時間的秒數值

const now = new Date().getTime(); // 1728057600000

取得現在時分秒的數字後，再利用css的rotate去旋轉

綜合上述的東西，我們可以來做一個常用的的小功能：
今天有一個活動廣告彈跳窗，在使用者勾選了今天之內不再顯示之後，這個彈窗在今天內就不能再彈出，但明天的話就可以重新彈跳出．

關閉彈跳窗後，判斷是否有勾選不再跳出，並儲存當下時間到localstorage
if (checked) {
  使用者勾選今天內不彈出後，取得勾選當下的時間毫秒數
  window.localstorage.setItem("noShow", Date.now());
} else {
  window.localStorage.removeItem("noShow");
}

處理每次是否要彈窗的邏輯
const key = window.localStorage.getItem("noShow");
取得存在瀏覽器中的時間戳記資料（noShow為我儲存在瀏覽器的key值）

if (key) {
  const hideTime = new Date(+key).getDate() + 1;
  使用者勾選當下的時間日期，並且加上一天
  
  const now = new Date().getDate();
  當天使用者又打開網頁後的目前時間日期
  
  if (now < hideTime) return;
  判斷還在今天之內的話，什麼也不做
  
  // .......打開彈窗的行為.......舉例：dialog.showModal()
  
} else {
  dialog.showModal();
  瀏覽器無key值，代表彈窗要跳出
}

上面很簡單的處理使用者每天都有登入的狀況，但如果使用者間隔很久才打開網頁，造成月份不同的情況，就會需要調整一下邏輯><．

2. setInterval()

• 每間隔多久要執行一次函式，有定時的東西，就要記得清除定時器．

setInterval("你要執行的function函式", 每間隔多久毫秒數要執行)
setInterval(getTime, 1000); // 一秒 = 1000，依此類推
clearInterval(getTime); // 清除定時

心得

第三天的時鐘完成！ 要去切好那個時鐘比想像中困難ＱＱ，css的transform需要多花點時間練習

困難處在於要理解transform-origin的css語法，正常沒有去設定的情況下，都是以一個元素的正中心去做旋轉rotate．有點抽象，可能自己拿一個物體來旋轉看看，比較好理解？